<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="./css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app" class="box">
        <div class="banner">
            <img class="logo" src="./img/logo3.png">
            <span>
                <img src="./img/home.png">中职院主页
                <img src="./img/contact.png">联系我们
            </span>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">新闻中心</a></li>
                <li><a href="#">境外合作</a></li>
                <li><a href="#">国际合作</a></li>
                <li><a href="#">学生风采</a></li>
                <li><a href="#">学科与师资</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">项目报名</a></li>
            </ul>
        </div>
        <div class="content">
            <div class="left">
                <div class="leftContent">
                    <div class="leftTitle">
                        <img src="./img/link_bg.png">
                        <span>招生咨询</span>
                    </div>
                    <ul>
                        <li><img src="./img/t2.png">想出国留学？澳大利亚大学...</li>
                        <li><img src="./img/t2.png">2017年中外合作办学...</li>
                        <li><img src="./img/t2.png">2017年中外合作办学...</li>
                    </ul>
                    <img style="width: 100%;margin-top: 20px" src="./img/zhaosheng.jpg">
                    <div>
                        <img style="margin-left: 30px;margin-top: 20px" src="./img/tel.png"><span style="position: relative;top: -8px;left: 10px">0760-88368001</span>
                    </div>
                    <div>
                        <img style="margin-left: 30px;margin-top: 10px" src="./img/button_111.jpg"><img style="margin-left: 10px" src="./img/button_111.jpg">
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="rightContent">
                    <div class="rightTitle">新闻中心</div>
                    <div class="rightNav">首页/新闻中心</div>
                    <ul>
                        <li v-for="item in array"><img src="./img/t2.png"><span class="listContent">{{ item.content }}</span><span class="listTime">{{ item.time }}</span></li>
                    </ul>
                    <div class="rightBtn">
                        <div>首页</div>
                        <div>上一页</div>
                        <div style="width: 25px" :class="{'checkInput':index==1}" @click="inputClick(list1, 1)">1</div>
                        <div style="width: 25px" :class="{'checkInput':index==2}" @click="inputClick(list2, 2)">2</div>
                        <div>下一页</div>
                        <div>尾页</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <p>版权所有&copy; 中山职业技术学院，电话：0760-88368001，邮政编码：528404</p>
            <p>地址：中山职业技术学院继续教育处国际合作科（雅思楼二楼Y203室）</p>
        </div>
    </div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data:{
            array: [],
            index: 1,
            list1: [
                { content: '我校成功举办第二届“香港职业教育体验营”活动', time: '2017-06-30' },
                { content: '香港职业训练局一行来我校交流访问', time: '2017-06-21' },
                { content: '美国北亚利桑那大学来我校交流访问', time: '2017-06-30' },
                { content: '中澳项目合作会议在我校召开', time: '2017-06-30' },
                { content: '美国夏威夷大学卡比奥拉尼学院代表再次来访', time: '2017-06-21' },
                { content: '2017届澳中国际班举办毕业典礼', time: '2017-06-23' },
                { content: '香港职业训练局一行来我校交流访问', time: '2017-06-23' },
                { content: '美国埃弗里特社区学院来访我校 促进学分互认项目发展', time: '2017-06-13' },
                { content: '上海泰尔弗教育集团再次来访共商合作办学项目', time: '2017-03-02' },
                { content: '香港职业训练局合作洽谈会顺利召开', time: '2016-09-21' },
                { content: '澳大利亚海斯国际学院总裁一行来我校交流访问', time: '2016-09-10' },
                { content: '我校成功举办中山职业技术学院“香港职业教育体验营”活动', time: '2016-07-11 ' }
            ],
            list2: [
                { content: '美国埃弗里特社区学院来访我校 促进学分互认项目发展', time: '2017-06-30' },
                { content: '香港职业训练局一行来我校交流访问', time: '2017-06-21' },
                { content: '上海泰尔弗教育集团再次来访共商合作办学项目', time: '2017-06-30' },
                { content: '中澳项目合作会议在我校召开', time: '2017-06-30' },
                { content: '澳大利亚海斯国际学院总裁一行来我校交流访问', time: '2016-09-21' },
                { content: '美国夏威夷大学卡比奥拉尼学院代表再次来访', time: '2016-09-10' },
                { content: '我校成功举办中山职业技术学院“香港职业教育体验营”活动', time: '2016-07-11' }
            ],
        },
        created() {
            this.array = this.list1;
        },
        methods: {
            inputClick: function (list, index) {
                this.array = list;
                this.index = index;
            },
        }
    })
</script>
</html>